<template>
  <el-row id="exam-add-box">
    <Breadcrumb :breadcrumb="breadcrumb"/>
    <el-row class="goBack-box">
      <el-button
        id="auditButton"
        class="buttonStyle2"
        @click="goBack()"
        >返回所有题目</el-button
      >
    </el-row>
    <el-row id="exam-box">
      <el-row class="exam-item">
        <el-col :span="2">
          <label>题目难度</label>
        </el-col>
        <el-col :span="20">
        <el-col :span="20">
          <el-radio v-model="essayDifficulty" label="简单">简单</el-radio>
          <el-radio v-model="essayDifficulty" label="中等">中等</el-radio>
          <el-radio v-model="essayDifficulty" label="困难">困难</el-radio>
        </el-col>
        </el-col>
          <el-button type="success" icon="el-icon-check" circle @click.prevent="register"></el-button>
      </el-row>
        <el-row class="exam-item">
        <el-col :span="2">
          <label>题干</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.stemBoxshow">
            <span class="exam-item-content">{{essayProblem}}</span>
            <label class="exam-update" @click="problemBoxshows.stemBoxshow = !problemBoxshows.stemBoxshow">修改</label>
          </div>
          <el-row v-if="problemBoxshows.stemBoxshow">
            <el-col :span="18">
              <el-input v-model="essayProblem" ></el-input>
            </el-col>
            <el-col :span="4">
              <label class="exam-update" @click="problemBoxshows.stemBoxshow = !problemBoxshows.stemBoxshow">确定</label>
              <label class="exam-update-red" @click="problemBoxshows.stemBoxshow = !problemBoxshows.stemBoxshow  ">取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
     <el-row class="exam-item">
        <el-col :span="2">
          <label>答案</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.AnswBoxshow">
            <span class="exam-item-content">{{essayAnsw}}</span>
            <label class="exam-update" @click="problemBoxshows.AnswBoxshow = !problemBoxshows.AnswBoxshow">修改</label>
          </div>
          <el-row v-if="problemBoxshows.AnswBoxshow">
            <el-col :span="18">
              <el-input v-model="essayAnsw" ></el-input>
            </el-col>
            <el-col :span="4">
              <label class="exam-update" @click="problemBoxshows.AnswBoxshow = !problemBoxshows.AnswBoxshow">确定</label>
              <label class="exam-update-red" @click="problemBoxshows.AnswBoxshow = !problemBoxshows.AnswBoxshow  ">取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
                                  <el-row class="exam-item">
        <el-col :span="2">
          <label>解析</label>
        </el-col>
        <el-col :span="20">
          <div v-if="!problemBoxshows.ParseBoxshow">
            <span class="exam-item-content">{{essayParse}}</span>
            <label class="exam-update" @click="problemBoxshows.ParseBoxshow = !problemBoxshows.ParseBoxshow">修改</label>
          </div>
          <el-row v-if="problemBoxshows.ParseBoxshow">
            <el-col :span="18">
                <el-input id="examNote-input-box" type="textarea" :rows="5" v-model="essayParse"></el-input>
            </el-col>
            <el-col :span="4">
              <label class="exam-update" @click="problemBoxshows.ParseBoxshow = !problemBoxshows.ParseBoxshow">确定</label>
              <label class="exam-update-red" @click="problemBoxshows.ParseBoxshow = !problemBoxshows.ParseBoxshow  ">取消</label>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      
    </el-row>
  </el-row>
</template>
<script>
import Breadcrumb from '@/components/common/Breadcrumb';
export default {
  name: "ExamEdit",
  components: {
    Breadcrumb,
  },
  data(){
    return{
      breadcrumb:[
        {name:"题目管理",path:"problem"},
        {name:"所有题目",path:"problem"},
        {name:"简答题编辑",path:""},
      ],
      problemBoxshows:{
        nameBoxshow:false,
        stemBoxshow:false,
        AnswBoxshow:false,
        ParseBoxshow:false
      },
      essayParse:this.$route.params.rowData.essayParse,
      essayId:this.$route.params.rowData.essayId,
      essayProblem: this.$route.params.rowData.problem,
      essayDifficulty:this.$route.params.rowData.difficulty,
      essayAnsw:this.$route.params.rowData.essayAnsw,
      
    }
  },
  methods: {
    register(){
        this.axios.post("/essay/update",{essayProblem:this.essayProblem,essayAnsw:this.essayAnsw,essayParse:this.essayParse,essayDifficulty:this.essayDifficulty,essayId:this.essayId})
        .then((response)=>{
            if(response.data.code==200){
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
            }else if(response.data.code==500){
                                this.$message({
                  type: 'fail',
                  message: '修改失败!'
                });
            }
        })

    },
    goBack(){
      this.$router.push({name:'problem'})
    }
  }
};
</script>
<style scoped>
/* 自定义的样式 */
#exam-add-box{
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  user-select: none;
  background-color: #f6fafb !important;
}

#breadcrumb{
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6 !important;
  margin-bottom: 30px;
}

#exam-add-box .buttonStyle1 {
  width: 100px;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-left: 15px;
}

#addProblem-box{
  padding-top: 20px;
}

.addProblem-header-item{
  padding-top: 30px;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 20px;
  background-color: #fafafa;
  /* border: 1px solid #dcdfe6 !important; */
}

.addProblem-header-item .linkButton{
  padding-right: 30px;
  cursor:pointer;
  /* color: rgb(15, 79, 30); */
  font-weight: 700;
}
.addProblem-item{
  margin-bottom: 30px;
}

#exam-box{
  padding-left: 50px;
  padding-right: 50px;
  background-color: #ffffff;
  padding-top: 30px;
  padding-bottom: 20px;
  height: 550px;
}
.exam-item{
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
}
.exam-update{
  padding-left: 25px;
  color: rgb(24, 171, 16);
  margin: 0px;
  cursor:pointer;
}
.exam-update-red{
  padding-left: 25px;
  color: rgb(223, 43, 43);
  margin: 0px;
  cursor:pointer;
}

.exam-item-content{
  padding-left: 20px;
}
.goBack-box{
  text-align: right;
  margin-top: -60px;
  margin-bottom: 30px;
}
</style>
<style>
/* 修改element-ui的样式 */
.el-form-item{
  padding: 0px;
}
.eaxm-problem-table .cell {
  color: #000000;
  text-align: center;
  font-weight: 500;
}
.eaxm-problem-table .has-gutter th:nth-child(2) .cell,.eaxm-problem-table .el-table__row td:nth-child(2) .cell {
  text-align: left!important;
  padding-left: 30px;
  padding-right: 30px;
}
#examNote-input-box{
  margin-top: 5px;
}
#exam-add-box .buttonStyle2 {
  width: auto;
  height: 30px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-right: 10px;
}
</style>